import React, { useState } from 'react';
// import moment from 'moment';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Form, Input, Button, message } from 'antd';
import FoldSearchPanle from '@/components/FoldSearchPanle';
import { FormattedMessage, useIntl } from 'umi';

export interface SelectProps {
  defaultParams: {};
  onSearch: (values: any) => void;
  children: any;
}
const QuotationSearch: React.FC<SelectProps> = (props: SelectProps) => {
  const [fold, setFold] = useState(true);
  const [form] = Form.useForm();
  const intl = useIntl();

  const search = (values: any) => {
    if (typeof props.onSearch === 'function') {
      props.onSearch(values);
    }
  };
  const handleReset = () => {
    form.resetFields();
    message.success(intl.formatMessage({ id: 'pages.reset.successful' }));
  };
  const layoutCol = { xl: 6, lg: 6, md: 12, sm: 12 };

  return (
    <Form form={form} initialValues={props.defaultParams} onFinish={search}>
      <FoldSearchPanle fold={fold} lastSpan={6} layoutCol={layoutCol}>
        <Form.Item name="orderNum" label={<FormattedMessage id="pages.orderNum" />}>
          <Input />
        </Form.Item>
        <Form.Item>
          <Button.Group >
            <Button
              type="primary"
              icon={<SearchOutlined />}
              htmlType="submit"
            >
              <span><FormattedMessage id="pages.search" /></span>
            </Button>
            <Button icon={<ReloadOutlined />} onClick={handleReset}>
              <span><FormattedMessage id="pages.reset" /></span>
            </Button>
            {props.children}
          </Button.Group>
        </Form.Item>
      </FoldSearchPanle>
    </Form>
  );
};
export default QuotationSearch;
